<template>
	<view class="work-container">
		<!-- 导航 -->
		<view class="rljs-nav">
			<view :class="index == 1 ? 'active' : 'rljs-title'" @click="clickNav(1)">
				{{ $t('search:captureLibrarySearch') }}
			</view>
			<view :class="index == 2 ? 'active' : 'rljs-title'" @click="clickNav(2)">
				{{ $t('search:registrationLibrarySearch') }}
			</view>
		</view>
		<view class="rljs-box" v-if="index == 1">
			<view class="rljs-img">
				<upload ref="child" @urlArr="zpjsImg"></upload>
			</view>
			<view class="rljs-list">
				<uni-forms ref="baseForm" :modelValue="form" label-width="200rpx">
					<uni-forms-item :label="$t('search:captureCamera')">
						<view @click="handleDevicesOpen" class="sbBox">
							{{ nodeListCopy }}
						</view>
					</uni-forms-item>
					<uni-forms-item :label="$t('search:startTime')">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.captureTimeB" />
					</uni-forms-item>
					<uni-forms-item :label="$t('search:endTime')">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.captureTimeE" />
					</uni-forms-item>
					<uni-forms-item :label="$t('search:threshold')">
						<uni-easyinput @focus="hideTabbar" @blur="showTabbar" v-model="form.thresholdMin"
							:placeholder="$t('search:enterThreshold')" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="btn">
				<button type="primary" v-if="tabbar" @click="jump(1)">{{ $t('search:search') }}</button>
			</view>
		</view>
		<view class="rljs-box" v-if="index == 2">
			<view class="rljs-img">
				<upload ref="child" @urlArr="zcjsImg"></upload>
			</view>
			<view class="rljs-list">
				<uni-forms ref="baseForm" :modelValue="form" label-width="200rpx" label-align="left">
					<uni-forms-item :label="$t('search:faceLibrary')">
						<uni-data-select v-model="formRecog.facedbIds" :localdata="facedbIdList">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="topN">
						<uni-easyinput @focus="hideTabbar" @blur="showTabbar" v-model="formRecog.topN"
							:placeholder="$t('search:enterTopN')" />
					</uni-forms-item>
					<uni-forms-item :label="$t('search:threshold')">
						<uni-easyinput @focus="hideTabbar" @blur="showTabbar" v-model="formRecog.thresholdMin"
							:placeholder="$t('search:enterThreshold')" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="btn">
				<button type="primary" v-if="tabbar" @click="jumpRecog(2)">{{ $t('search:search') }}</button>
			</view>
		</view>
		<devicesTree ref='devicesTree' @onOk="setDevides" />
	</view>
</template>
<script>
import {
	searchTree,
	searchCount,
	DBFace,
	DBFace2
} from "@/api/rljc.js"
import upload from "@/components/upload/index.vue"
import devicesTree from '@/components/devicesTree/devicesTree.vue'

export default {
	components: {
		upload,
		devicesTree
	},
	data() {
		return {
			showDai: false,
			index: 1,
			// 抓拍库参数
			form: {
				captureTimeB: "",
				captureTimeE: "",
				currentPage: 1,
				imgList: [],
				// nodeList: [],
				devicesTree: [],
				pageSize: 10,
				recogType: 1,
				searchType: 1,
				totalRows: 0,
				thresholdMin: "80", //阈值
			},
			nodeListCopy: this.$t('search:pleaseSelect'),
			// 注册库参数
			// formRecog: {
			// 	cardId: "",
			// 	currentPage: 1,
			// 	facedbIds: [],
			// 	img: "",
			// 	imgList: "",
			// 	name: "",
			// 	pageSize: 10,
			// 	recogType: 1,
			// 	searchType: 2,
			// 	thresholdMax: 1,
			// 	thresholdMin: "80",
			// 	totalRows: 0,
			// },
			formRecog: {
				imgList: [],
				facedbIds: '',
				topN: "100",
				thresholdMin: "60",
			},
			dataTrees: {
				parentRegionId: "1662703262625"
			},
			dataTree: [], //人像库list
			// 下拉框形态赋值
			treeChild: {
				text: "name",
				value: "id",
			},
			tabbar: true,
			windowHeight: '',
			facedbIdList: []
			// facedbIdList: [{ value: 'e679d84c677111f0b6507486e220e01e', text: " Staff" }]
		}
	},
	onLoad(e) {
		/*  var obj={}
		  obj.imgUrl='https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
		  obj.showType=1*/
		if (e.param != null) {
			var param = JSON.parse(e.param)
			if (param.imgUrl != null && param.imgUrl != '') {
				if (param.showType == 1) {
					this.index = 1
					this.form.imgList = [param.imgUrl]

					this.formRecog.imgList = [param.imgUrl]
					this.formRecog.img = param.imgUrl

					var arr = []
					var img = {
						showUrl: param.imgUrl,
						from: 1
					}
					arr.push(img)
					this.$nextTick(() => {
						this.$refs.child.setFileList(arr)
					})

				}
				if (param.showType == 2) {
					this.index = 2
					this.formRecog.imgList = [param.imgUrl]
					this.formRecog.img = param.imgUrl
					var arr = []
					var img = {
						showUrl: param.imgUrl,
						from: 1
					}
					arr.push(img)
					this.$nextTick(() => {
						this.$refs.child.setFileList(arr)
					})
				}
			}
		}


		// 一天的毫秒数
		const MillisecondsADay = 24 * 60 * 60 * 1000 * 1
		// 当前时间戳
		var timestamp = Date.parse(new Date());
		// 昨天时间戳
		var timestampStart = timestamp - MillisecondsADay;
		var timestampEnd = timestamp + 30 * 60 * 1000
		this.form.captureTimeE = timestampEnd
		this.form.captureTimeB = timestampStart

		uni.getSystemInfo({
			success: (res) => {
				this.windowHeight = res.windowHeight;
			}
		});
		uni.onWindowResize((res) => {
			if (res.size.windowHeight < this.windowHeight) {
				this.tabbar = false
			} else {
				this.tabbar = true
			}
		})
	},
	onShow() {
		this.faceDB()
	},
	methods: {
		showTabbar() {
			this.tabbar = true;
		},
		hideTabbar() {
			this.tabbar = false;
		},
		// 导航
		clickNav(index) {
			this.index = index
			//this.formRecog.img=''
			//this.formRecog.imgList=''
			//this.form.imgList=[]
			//this.$refs.child.clear()
		},
		// 注册库下拉框数据形态转换
		facedbIds() {
			let arr = []
			arr.push(this.formRecog.facedbIds)
			this.formRecog.facedbIds = arr
		},
		// 人像库下拉框
		faceDB() {
			// DBFace({
			// 	isDelete: 1,
			// 	queryMode: "self"
			// }).then(res => {
			// 	this.dataTree = res.data
			// })
			DBFace2({
				isDelete: 1
			}).then(res => {
				this.facedbIdList = res.data.map(({ id, name }) => ({ value: id, text: name }))
			})
		},
		// 抓拍库图片
		zpjsImg(e) {
			console.log(e)
			if (e != null) {
				let arr = []
				arr.push(e)
				this.form.imgList = arr

				// this.formRecog.img = e
				this.formRecog.imgList = arr
			} else {
				this.form.imgList = []

				this.formRecog.img = ''
				this.formRecog.imgList = []
			}
		},
		zcjsImg(e) {
			if (e != null) {
				let arr = []
				arr.push(e)
				this.form.imgList = arr

				// this.formRecog.img = e
				this.formRecog.imgList = arr
			} else {
				this.form.imgList = []

				this.formRecog.img = ''
				this.formRecog.imgList = []
			}
		},
		// 设备选择
		equipment(index) {
			uni.navigateTo({
				url: `/pages/shebei/index?type=${index}`
			})
		},
		// 抓拍库检索
		jump(index) {
			if (this.form.imgList.length === 0) {
				uni.showToast({
					title: this.$t('search:uploadImage'),
					icon: 'none',
					duration: 1500
				});
				return
			}
			uni.navigateTo({
				url: `/pages/search/jsjg/index?data=${encodeURIComponent(JSON.stringify(this.form))}&type=${index}`
			})
		},
		// 注册库检索
		jumpRecog(index) {
			if (this.formRecog.imgList.length === 0) {
				uni.showToast({
					title: this.$t('search:uploadImage'),
					icon: 'none',
					duration: 1500
				});
				return
			}
			if (!this.formRecog.facedbIds) {
				uni.showToast({
					title: this.$t('search:selectFaceLibrary'),
					icon: 'none',
					duration: 1500
				});
				return
			}
			uni.navigateTo({
				url: `/pages/search/jsjg/index?data=${encodeURIComponent(JSON.stringify(this.formRecog))}&type=${index}`
			})
		},
		handleDevicesOpen() {
			this.$refs.devicesTree.open()
		},
		setDevides(id, labels) {
			this.form.devicesTree = id
			this.nodeListCopy = labels || this.$t('search:pleaseSelect')
		},
	},
}
</script>

<style scoped>
page {
	background-color: #fff;
}

.rljs-nav {
	position: fixed;
	top: 80rpx;
	width: 750rpx;
	height: 80rpx;
	background-color: #f1f1f1;
	display: flex;
	justify-content: space-evenly;
	z-index: 50;
}

.rljs-title {
	line-height: 80rpx;
}

.active {
	line-height: 80rpx;
	color: #0081ff;
	border-bottom: 2px solid #0081ff;
}

.rljs-img {
	padding: 40rpx 0;
	margin: auto;
}

.rljs-list {
	padding: 0rpx 60rpx;
}

.rljs-list .uni-forms-item {
	border-bottom: 1px solid #dedede;
	margin-bottom: 0rpx;
	padding: 5rpx 0;
}

.rljs-list>>>.uni-input-input {
	color: #333;
}

.rljs-list>>>.input-value-border {
	border: none;
}

.rljs-list>>>.uni-text {
	display: none;
}

.rljs-list>>>.placeholder {
	font-size: 28rpx;
}

.rljs-list>>>.uni-date-x--border {
	border: none;
}

.rljs-list>>>.uni-icons {
	display: none;
}

.rljs-list>>>.is-input-border {
	border: none;
}

.rljs-list>>>.uni-easyinput__placeholder-class {
	font-size: 28rpx;
}

.rljs-list>>>.uni-date__x-input {
	padding: 0;
}

.rljs-list>>>.uni-select {
	border: none;
}

.rljs-list>>>.uni-select__input-placeholder {
	font-size: 28rpx;
}

.btn {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	background-color: #fff;
}

.btn button {
	margin: 0rpx 50rpx 50rpx 50rpx;
	font-size: 30rpx;
}

.rljs-box {
	width: 750rpx;
	margin-top: 80rpx;
	/* padding-bottom: 200rpx; */
}

::v-deep .rljs-img .imgClass {
	width: 250rpx;
	height: 350rpx;
	margin: 0 auto;
}

.sbBox {
	width: 428rpx;
	line-height: 72rpx;
	padding: 0 10rpx 0 20rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>